<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>演示10_2时间处理程序DOM0,DOM2代码</title>
	</head>
	<body>
		<input type="button" onclick="alert('元素上绑定的DOM0事件')" id="btnClick" value="元素上绑定DOM0"/>
		<input type="button" id="btnClick2" value="代码中绑定DOM0"/>
		<div id="div1">
			<input type="button" id="btnClick3" value="绑定DOM2事件" />
		</div>
		<input type="button" id="btnClick4" value="移除一个绑定在btnClick3的DOM2事件" />
		
		<script type="text/javascript">
			// =============================================
			// DOM0事件演示
			document.getElementById('btnClick2').onclick = function(){
				alert('代码中绑定的DOM0事件')
			}
			
			// DOM0事件设为null既可清除之前设置的DOM0事件
// 			document.getElementById('btnClick').onclick = null;
// 			document.getElementById('btnClick2').onclick = null;
			
			// DOM0事件演示结束
			// ====================================================
			
			
			// ============================================
			// DOM2事件演示开始
			
			// 对按钮btnClick3绑定多个DOM2事件
			function a(){
				alert("btnClick3的DOM2事件处理程序a")
			}
			function b(){
				alert("btnClick3的DOM2事件处理程序b")
			}
			
			var btnClick3 = document.getElementById('btnClick3');
			// DOM2事件绑定后会依次触发
			btnClick3.addEventListener('click', a);
			btnClick3.addEventListener('click', b);
			btnClick3.addEventListener('click', function(){
				alert("btnClick3的DOM2事件处理程序，匿名函数")
			})
			
			
			var btnClick4 = document.getElementById('btnClick4');
			btnClick4.onclick = function(){
				// DOM2事件移除时需要指定移除的事件和函数
				// 不能移除绑定的匿名函数
				btnClick3.removeEventListener('click', a);
			}
			
			// DOM2事件处理程序默认为冒泡流
			// 第三个参数为布尔型.默认为false.使用冒泡流.设为true则使用捕获流
// 			document.getElementById('div1').addEventListener('click', function(){
// 				alert('div1的DOM2处理程序')
// 			}, true);

			
			
			// DOM2事件结束
			// ================================================
			
			 
			
		</script>
	</body>
</html>
